<template>
  <div class="user-home">
    <div class="home-container">
      <!-- 欢迎横幅 -->
      <div class="welcome-banner">
        <div class="banner-content">
          <div class="user-info">
            <el-avatar :size="80" :src="userStore.avatar || defaultAvatar" class="user-avatar"></el-avatar>
            <div class="user-text">
              <h1>欢迎回来，{{ user.nickName || '尊敬的用户' }}</h1>
              <p>让我们一起探索非遗文化的魅力</p>
            </div>
          </div>
          <div class="user-contact" v-if="user.email || user.phonenumber">
            <p v-if="user.email">
              <el-icon><Message /></el-icon>
              <span>{{ user.email }}</span>
            </p>
            <p v-if="user.phonenumber">
              <el-icon><Phone /></el-icon>
              <span>{{ user.phonenumber }}</span>
            </p>
          </div>
        </div>
      </div>

      <!-- 主要功能区 -->
      <div class="main-features">
        <h2 class="section-title">快捷功能</h2>
        <el-row :gutter="30">
          <el-col :span="8">
            <div class="feature-card" @click="$router.push('/user/mall')">
              <div class="feature-icon">
                <el-icon><ShoppingCart /></el-icon>
              </div>
              <h3>非遗商城</h3>
              <p>探索独特的非遗文化商品</p>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="feature-card" @click="$router.push('/user/forum')">
              <div class="feature-icon">
                <el-icon><ChatDotRound /></el-icon>
              </div>
              <h3>非遗论坛</h3>
              <p>参与文化交流与分享</p>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="feature-card" @click="$router.push('/user/profile')">
              <div class="feature-icon">
                <el-icon><User /></el-icon>
              </div>
              <h3>个人中心</h3>
              <p>管理个人信息与订单</p>
            </div>
          </el-col>
        </el-row>
      </div>

      <!-- 文化特色区 -->
      <div class="culture-features">
        <h2 class="section-title">非遗文化特色</h2>
        <div class="culture-grid">
          <div class="culture-item">
            <div class="culture-icon">
              <el-icon><Collection /></el-icon>
            </div>
            <div class="culture-content">
              <h3>传统技艺</h3>
              <p>探索匠人们代代相传的精湛技艺</p>
            </div>
          </div>
          <div class="culture-item">
            <div class="culture-icon">
              <el-icon><ShoppingBag /></el-icon>
            </div>
            <div class="culture-content">
              <h3>文化传承</h3>
              <p>感受非遗文化的深厚底蕴</p>
            </div>
          </div>
          <div class="culture-item">
            <div class="culture-icon">
              <el-icon><Share /></el-icon>
            </div>
            <div class="culture-content">
              <h3>共同参与</h3>
              <p>加入非遗保护与传承的行列</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, watch } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { ShoppingCart, ChatDotRound, User, Collection, ShoppingBag, Share, Message, Phone } from '@element-plus/icons-vue'
import { getInfo } from '@/api/user/auth'
import useUserStore from '@/store/modules/user'

const router = useRouter()
const userStore = useUserStore()
const defaultAvatar = '/src/assets/images/profile.jpg'

const user = ref({})

// 获取用户信息
const getUserInfo = async () => {
  try {
    const res = await getInfo()
    if (res.code === 200) {
      user.value = res.user
      console.log('用户主页 - 获取到的用户信息:', res.user)
      console.log('用户主页 - 当前头像URL:', userStore.avatar)
    }
  } catch (error) {
    console.error('获取用户信息失败:', error)
    ElMessage.error('获取用户信息失败')
  }
}

// 监听 userStore.avatar 的变化
watch(() => userStore.avatar, (newVal) => {
  console.log('用户主页 - 头像URL更新:', newVal)
}, { immediate: true })

onMounted(() => {
  getUserInfo()
})
</script>

<style lang="scss" scoped>
.user-home {
  min-height: 100vh;
  background: linear-gradient(135deg, #f5f7fa 0%, #e4e7eb 100%);
  padding: 20px;

  .home-container {
    max-width: 1200px;
    margin: 0 auto;
  }

  .welcome-banner {
    background: linear-gradient(135deg, #409EFF 0%, #36cfc9 100%);
    border-radius: 16px;
    padding: 40px;
    margin-bottom: 40px;
    color: white;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);

    .banner-content {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .user-info {
      display: flex;
      align-items: center;
      gap: 24px;

      .user-avatar {
        border: 4px solid rgba(255, 255, 255, 0.3);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
      }

      .user-text {
        h1 {
          font-size: 28px;
          margin: 0 0 8px;
          font-weight: 600;
        }

        p {
          font-size: 16px;
          margin: 0;
          opacity: 0.9;
        }
      }
    }

    .user-contact {
      p {
        display: flex;
        align-items: center;
        gap: 8px;
        margin: 8px 0;
        font-size: 14px;
        opacity: 0.9;

        .el-icon {
          font-size: 16px;
        }
      }
    }
  }

  .section-title {
    font-size: 24px;
    color: #303133;
    margin-bottom: 30px;
    font-weight: 600;
    position: relative;
    padding-left: 16px;

    &::before {
      content: '';
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      width: 4px;
      height: 20px;
      background: #409EFF;
      border-radius: 2px;
    }
  }

  .main-features {
    margin-bottom: 40px;

    .feature-card {
      background: white;
      border-radius: 16px;
      padding: 30px;
      text-align: center;
      cursor: pointer;
      transition: all 0.3s ease;
      height: 100%;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);

      &:hover {
        transform: translateY(-5px);
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);

        .feature-icon {
          transform: scale(1.1);
        }
      }

      .feature-icon {
        width: 70px;
        height: 70px;
        background: #ecf5ff;
        border-radius: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 20px;
        transition: all 0.3s ease;

        .el-icon {
          font-size: 32px;
          color: #409EFF;
        }
      }

      h3 {
        font-size: 20px;
        color: #303133;
        margin: 0 0 12px;
      }

      p {
        color: #606266;
        margin: 0;
        font-size: 14px;
        line-height: 1.6;
      }
    }
  }

  .culture-features {
    .culture-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 24px;
    }

    .culture-item {
      background: white;
      border-radius: 16px;
      padding: 24px;
      display: flex;
      align-items: center;
      gap: 20px;
      transition: all 0.3s ease;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);

      &:hover {
        transform: translateX(5px);
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);

        .culture-icon {
          transform: scale(1.1);
        }
      }

      .culture-icon {
        width: 60px;
        height: 60px;
        background: #ecf5ff;
        border-radius: 16px;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.3s ease;

        .el-icon {
          font-size: 28px;
          color: #409EFF;
        }
      }

      .culture-content {
        flex: 1;

        h3 {
          font-size: 18px;
          color: #303133;
          margin: 0 0 8px;
        }

        p {
          color: #606266;
          margin: 0;
          font-size: 14px;
          line-height: 1.6;
        }
      }
    }
  }
}

// 响应式布局
@media (max-width: 768px) {
  .user-home {
    .welcome-banner {
      padding: 24px;

      .banner-content {
        flex-direction: column;
        text-align: center;
        gap: 20px;
      }

      .user-info {
        flex-direction: column;
        gap: 16px;
      }
    }

    .culture-features {
      .culture-grid {
        grid-template-columns: 1fr;
      }
    }
  }
}
</style> 